<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <style>
    body {
      background-color: #BDBDBD;
    }

    .box {
      display: flex;
      flex-wrap: wrap;
    }

    .num {
      width: 45px;
      height: 80px;
      background-size: cover
    }

    .item {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      background-size: cover
    }

    .message {
      font-size: 14px;
      display: flex;
      justify-content: space-between;
    }

    .content {
      border: none;
      box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
      padding: 4px;
      margin: 4px;
    }

    .landmines {
      display: flex;
      justify-content: center;
    }

    .head {
      border: 5px solid #808080;
      border-left-color: #fff;
      border-top-color: #fff;
    }

    table {
      border-collapse: collapse;
      width: 100%;
    }

    th,
    td,
    th {
      border: 2px solid #808080;
      border-left-color: #fff;
      border-top-color: #fff;
      text-align: left;
      padding: 8px;
      margin: 2px;
    }

    th {
      text-align: center
    }

    p {
      text-align: center;
      margin-top: 5px;
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="message content">
      <div class="landmines">
      </div>

      <div class="head"
        style="background-size:cover;width:70px;height:70px;background-image: url(data:img/gif;base64,R0lGODlhFQAVAJEAAAAAAP//AL29vQAAACH5BAAHAP8ALAAAAAAVABUAAAJAlI+py50AoUMwWCsduBy33XXAAoaiUlZY+nBq8MKUSY9HSbtzft4X/vu1MCLhcBXRoXgyBlD5AWYmgsiUis0yCgA7)">
      </div>

      <div class="head" style="background-size:cover;width:70px;height:70px;background-image:url('{{headurl}}')"></div>

    </div>
    <div class="box content"></div>
    <p>{{command}}</p>
  </div>
  <p>Created by Yunzai-Bot & xianyu-plugin</p>

</body>
<script type="text/javascript">

  /**
   * yep：微笑
   * xx：寄了
   * num：显示的数字
   * landmine：地图样式
   * 0：翻开空
   * 1-8：雷数量
   * 9：雷
   * -：未翻开
   * +：标记
   * x：踩中的雷
  */
  const icon = {
    xx: 'data:img/gif;base64,R0lGODlhFQAVAJEAAAAAAP//AMDAwAAAACH5BAAHAP8ALAAAAAAVABUAAAJDlI+py50AoUMwWCsduBy33XXAAm5gYHrPdWLs6p6parShSN36eNg6LbBFKhxejyV6wXwo4PGH+vyMDCKLqhlOttxuAQA7',
    yep: 'data:img/gif;base64,R0lGODlhFQAVAJEAAAAAAP//AL29vQAAACH5BAAHAP8ALAAAAAAVABUAAAJAlI+py50AoUMwWCsduBy33XXAAoaiUlZY+nBq8MKUSY9HSbtzft4X/vu1MCLhcBXRoXgyBlD5AWYmgsiUis0yCgA7',
    num: {
      0: 'data:img/gif;base64,R0lGODlhDQAXAJEAAP8AAIAAAAAAAAAAACH5BAQUAP8ALAAAAAANABcAAAI5lI8Jy3wgmoMRymoc0vqt/G1hB1JkZVKKaQSC60YI/NZPW8dpApZrqvKhfkIPkIi5jFANWUkS5CUKADs=',
      1: 'data:img/gif;base64,R0lGODlhDQAXAJEAAP8AAIAAAAAAAAAAACH5BAQUAP8ALAAAAAANABcAAAI3lI8psc33mDQAmilAdUnv1mkXeHhWuGGlOCpsxGXIpII0dYbjs358v0PlgDGiDfQKPj6cmkJRAAA7',
      2: 'data:img/gif;base64,R0lGODlhDQAXAJEAAP8AAIAAAAAAAAAAACH5BAQUAP8ALAAAAAANABcAAAI8lI8Jy3whmgMvNmsgRC4nSwmaslRkOHKl962QVIYgfFAwta3JBu6i0UHwgp6cztQT/jCSZWTmGN5kn08BADs=',
      3: 'data:img/gif;base64,R0lGODlhDQAXAJEAAP8AAIAAAAAAAAAAACH5BAQUAP8ALAAAAAANABcAAAI5lI8Jy3whmgMvNmsgRC4nSwmaslRkOHKl962QVIYgXMGUvJFebnRi6/qpcECU8OB7XYK2CNIm+3wKADs=',
      4: 'data:img/gif;base64,R0lGODlhDQAXAJEAAP8AAIAAAAAAAAAAACH5BAQUAP8ALAAAAAANABcAAAI8lI8psc0HDJsmCmDptdhCXIFIF3rlOYpkyplftXWgJ9cHU8+3skkNu0usNB/PA+gQin4a0YPyMEF/PF4BADs=',
      5: 'data:img/gif;base64,R0lGODlhDQAXAJEAAP8AAIAAAAAAAAAAACH5BAQUAP8ALAAAAAANABcAAAI5lI8Jy3wgmgtmxSZotYhql2gX1GUbWZ6heSWGCEkWLHNmHR0iwnmKvVOZgiAWr2cU3jBIHKpmc7kKADs=',
      6: 'data:img/gif;base64,R0lGODlhDQAXAJEAAP8AAIAAAAAAAAAAACH5BAQUAP8ALAAAAAANABcAAAI5lI8Jy3wgmgtmxSZotYhql2gX1GUbWZ6heSWGCEkWLHPRiJE2woFPvxupeEDU0HeM5XQ4B6oWdCEKADs=',
      7: 'data:img/gif;base64,R0lGODlhDQAXAJEAAP8AAIAAAAAAAAAAACH5BAQUAP8ALAAAAAANABcAAAI5lI8Jy3whmgMvNmsgRC4nSwmaslRkOHKl963buIUejLziHZnkfOpHl/qtcCoU0dDBpVy8WO0W/EgLADs=',
      8: 'data:img/gif;base64,R0lGODlhDQAXAIAAAP8AAAAAACH5BAQUAP8ALAAAAAANABcAAAI0jI8Jy3wQmoMRymoc0vqt/G1hB1JkZVKKiTaRJ4VvbIGJja6pWvbirvPBbJdRawKL3ZaGAgA7',
      9: 'data:img/gif;base64,R0lGODlhDQAXAJEAAP8AAIAAAAAAAAAAACH5BAQUAP8ALAAAAAANABcAAAI6lI8Jy3wgmoMRymoc0vqt/G1hB1JkZVKKiTaRJ4VC0E4HnWDzLqp4b6D9SrecRrjy1XS0mAUWy0kNBQA7',
    },
    landmine: {
      0: 'data:img/gif;base64,R0lGODlhGQAZAKIAAM7OzsbGxr6+vra2trKysqampoKCggAAACH5BAAHAP8ALAAAAAAZABkAAANHaLrc3mWQSau9xAwQuv9gGBhEIJxoqq4CabLw6sY0Otf0jcP6Lpc+HjD4exFTvWNrqDwlj09iNDj1VXdXXLa2zTGb3VgYlgAAOw==',
      1: 'data:img/gif;base64,R0lGODlhGQAZAJEAAMDAwICAgAAA/wAAACH5BAQUAP8ALAAAAAAZABkAAAJMjI+py70Ao5wUmorxzTxuLIRC9lFiSAbZOWqqybZVCcWoC8fpeu5gj/uJfBUWMXebvYpAJdJGoQFsTc8yQh1OpJ3otesEH8XbLzlSAAA7',
      2: 'data:img/gif;base64,R0lGODlhGQAZALMAAMDAwKu5q6i4qKW3pZy0nJaylpCwkIquioCAgACAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAAHAP8ALAAAAAAZABkAAAReEMlJq704X8C7/yAnhSQ5lmh3cknrvi64wvT7zXV9I50N+ipeihXzrFACoEhYMtB2pSSsIGN6CrRBIHQEEGjb0pEmGOJch+Gyl3samW13kB0vztViKx665+r7a4AfEQA7',
      3: 'data:img/gif;base64,R0lGODlhGQAZAJEAAMDAwICAgP8AAAAAACH5BAQUAP8ALAAAAAAZABkAAAJOjI+py70Ao5wUmorxzTxuIITiOFIfiZbSmabT16le0EWyRdeg+OZTGzL5JECBsFI86m4AGIfpzEB9RVLPVuWtqFnjVZeJgmdjzbBMRk8KADs=',
      4: 'data:img/gif;base64,R0lGODlhGQAZAJEAAMDAwICAgAAAmQAAgCH5BAAHAP8ALAAAAAAZABkAAAJdjI+py70Ao5wUmorxzTzuOgjAQJLUN5FiaU5oVK7sGVAxxA50Gor47KrBVJLc7hfilY6jnHMp+TynwYjgisXmfB4hx1jtgKPezLjbaULJ6bOlnK684mG6HG5H5ykFADs=',
      5: 'data:img/gif;base64,R0lGODlhGQAZAJEAAMDAwICAgIAAAAAAACH5BAQUAP8ALAAAAAAZABkAAAJOjI+py70Ao5wUmorxzTxuIITiSE4fiY5mEKXu2oodDKmzx9bybeWgW6L9gDZcjLgz3oo9HhPw6TxPyGRTVxUIs1ohjxL9SsLia3nsO0MKADs=',
      6: 'data:img/gif;base64,R0lGODlhGQAZAJEAAMDAwICAgACAgAAAACH5BAQUAP8ALAAAAAAZABkAAAJTjI+py70Ao5wUmorxzTxuKITiKFIfiZbTmaJmEI3dCoPqbNWAjOdxS3r9gDyPjhiUsEKVos/GpDgBS0Hz9twhsdTjNmqUfIU9ja5MQ1c+6nBbUgAAOw==',
      7: 'data:img/gif;base64,R0lGODlhGQAZAJEAAL6+voKCggAAAAAAACH5BAAHAP8ALAAAAAAZABkAAAJMjI+py70Ao5wUmorxzTxuIITiSE4fiY5mEKXu2rUiHIOz9HElznY771NRcpQfrWI8TpJK2S1DtD2hPWeoRhTGojVgV1P9NsWWMBlSAAA7',
      8: 'data:img/gif;base64,R0lGODlhGQAZAIAAAMDAwICAgCH5BAQUAP8ALAAAAAAZABkAAAJKjI+py70Ao5wUmorxzTxu63xeMIYi8JnHlK4UwpLgOctjaUuwnqtvb/rxQsJaZXcz/k4tGsqVfPp4OCK1yih2OM7t1avJgWNjTAEAOw==',
      9: 'data:img/gif;base64,R0lGODlhGQAZAJEAAP///76+voKCggAAACH5BAAHAP8ALAAAAAAZABkAAAJglI+py70Bo5wUmhrHwPFyzVlCCIYeBGqqik5nkK4s7I6TjFOvCvR42bGhND3AbyPZEX2/GuwILV2iUZGEOgtesUhthuu8VcNbqE74fOZoSTQFiHm9u3G3OBSQ4yv6/aQAADs=',
      'x': 'data:img/gif;base64,R0lGODlhGQAZAJEAAP///4CAgP8AAAAAACH5BAQUAP8ALAAAAAAZABkAAAJgjI+py70Co5wUmhrHwPFyzVlBCIYeBGqqik6nkK4s7I6TjFOvCvR42bGhND3AbyPZEX2/GuwILV2iUZGEOgtesUhthuu8VcNbqE74fOZoSTQFiHm9u3G3OCSQ4yv6/aQAADs=',
      '+': 'data:img/gif;base64,R0lGODlhGQAZAKIAAP///8DAwICAgP8AAAAAAAAAAAAAAAAAACH5BAAHAP8ALAAAAAAZABkAAANsCLrcriG8OSO9KwiRo//gt3FQaIJjZw7DmZYh25ovEMtzWH+47G6qno8GhAWEOVTRBur9SMxbUrQ8BQiEpyqE1RpBXSLUGtZVI9i0Wu3ZodfwbMR9ja/bZ6s3qjeTNCOBgoMjc4SHhIaIixsJADs=',
      '-': 'data:img/gif;base64,R0lGODlhGQAZAJEAAP///8DAwICAgAAAACH5BAQUAP8ALAAAAAAZABkAAAJKhI+pFrH/GpwnCFGb3nxfzHQi92XjWYbnmAIrepkvGauzV7s3Deq71vrhekJgrtgIIpVFptD5g+6kN+osZflot9xPsgvufsPkSwEAOw==',
    },
  }

  // 导入地图，遍历地图，输出

  // arr传入示例
  // const arr = '0,"-","+","x",1,2,3,4,5,8,9';
  let arr = '{{map}}';
  let x = '{{x}}';
  let mun = '{{muns}}'; // 显示的数字

  mun = mun.split(',');
  let numbers = arr.split(',');

  // 使用正则表达式匹配 'x' 字符
  var reg = /x/g;

  // 判断数组中是否存在 'x' 字符
  if (reg.test(numbers.toString())) {
    // 如果存在，则修改class为head的元素的背景图片
    var head = document.querySelector('.head');
    head.style.backgroundImage = `url(${icon.xx})`;
  }

  let map = [] // 地图
  let munmap = [] // 显示的数字

  // 遍历numbers，每x个数换一行
  for (var i = 0; i < numbers.length; i += x) {
    map.push(numbers.slice(i, i + x));
    munmap.push(mun.slice(i, i + x));
  }

  let c = '{{c}}'
  let size = +c / map[0].length // 每一个格子的大小
  let sty = `width:${size}px;height:${size}px;`

  const l = '{{l}}' // 雷的数量


  var tb = [] // 格子内容
  var lei = [] // 雷的数量
  const box = document.querySelector('.box');
  const landmines = document.querySelector('.landmines');
  const app = document.getElementById('app');

  const lnum = {
    0: `<div class="num" style="background-image: url(${icon.num['0']})"></div>`,
    1: `<div class="num" style="background-image: url(${icon.num['1']})"></div>`,
    2: `<div class="num" style="background-image: url(${icon.num['2']})"></div>`,
    3: `<div class="num" style="background-image: url(${icon.num['3']})"></div>`,
    4: `<div class="num" style="background-image: url(${icon.num['4']})"></div>`,
    5: `<div class="num" style="background-image: url(${icon.num['5']})"></div>`,
    6: `<div class="num" style="background-image: url(${icon.num['6']})"></div>`,
    7: `<div class="num" style="background-image: url(${icon.num['7']})"></div>`,
    8: `<div class="num" style="background-image: url(${icon.num['8']})"></div>`,
    9: `<div class="num" style="background-image: url(${icon.num['9']})"></div>`,
  }

  const cs = {
    '-': `<div class="item" style="${sty}background-image: url(${icon.landmine['-']})">`,
    '+': `<div class="item" style="${sty}background-image: url(${icon.landmine['+']})">`,
    'x': `<div class="item" style="${sty}background-image: url(${icon.landmine['x']})">`,
    0: `<div class="item" style="${sty}background-image: url(${icon.landmine['0']})">`,
    1: `<div class="item" style="${sty}background-image: url(${icon.landmine['1']})">`,
    2: `<div class="item" style="${sty}background-image: url(${icon.landmine['2']})">`,
    3: `<div class="item" style="${sty}background-image: url(${icon.landmine['3']})">`,
    4: `<div class="item" style="${sty}background-image: url(${icon.landmine['4']})">`,
    5: `<div class="item" style="${sty}background-image: url(${icon.landmine['5']})">`,
    6: `<div class="item" style="${sty}background-image: url(${icon.landmine['6']})">`,
    7: `<div class="item" style="${sty}background-image: url(${icon.landmine['7']})">`,
    8: `<div class="item" style="${sty}background-image: url(${icon.landmine['8']})">`,
    9: `<div class="item" style="${sty}background-image: url(${icon.landmine['9']})">`,
  }

  for (let i in l) {
    lei.push(lnum[l[i]])
  }

  for (let i in map) {
    for (let j in map[i]) {
      if (map[i][j] == '-' || map[i][j] == '+') {
        let p = `<div class="number">${munmap[i][j]}</div>`
        tb.push(`${cs[map[i][j]]}${p}</div>`)
      } else {
        tb.push(`${cs[map[i][j]]}</div>`)
      }
    }
  }

  landmines.innerHTML = lei.join('')
  box.innerHTML = tb.join('')
</script>

</html>